<template>
  <div class="part3">
    <div>
        <span class="s6">
          我们的服务
        </span>
    </div>
    <div class="flex-container">
      <div class="flex-item">
        <img src="../assets/img/part301.png " alt="" class="part301" >
        <h3 class="part3-text">
            功能分析和故障诊断
          </h3>
        <p class="s7">
          我们的图像诊断服务使用先进的技术来分析和解释图像，为您提供准确，快速的结果。
        </p>
        <router-link to="/discern" class="link">阅读更多</router-link>
      </div>
      <div class="flex-item">
        <img src="../assets/img/part302.png " alt="" class="part301" >
        <h3 class="part3-text">
            故障分析和数据洞察
          </h3>
        <p class="s7">
          数据统计 我们提供简单易用的数据统计工具，帮助您分析和可视化数据，从而更好地了解您的业务表现和用户行为。
        </p>
        <router-link to="/data" class="link">阅读更多</router-link>
      </div>
      <div class="flex-item">
        <img src="../assets/img/part303.png " alt="" class="part301" >
        <h3 class="part3-text">
            机械管理
          </h3>
        <p class="s7">
          将用户传入的数据和模型分类出的诊断结果进行储存并跟进故障处理进度。
        </p>
        <router-link to="/manage" class="link">阅读更多</router-link>
      </div>
    </div>
</div>
  <div class="part4">
        <span style="font-size:45px">
          满足的客户
        </span>
    <p class="s14">
      我们提供了一个易于使用的网络平台，用于诊断和分析功率图图像和数据，提供故障结果和实时监控，所有这些都以用户友好的界面呈现，并采用凉爽的蓝色配色方案。
    </p>
    <img src="../assets/img/part403.png" alt=""  class="part403" >
  </div>
</template>

<script>
export default {
  name: "service"
}
</script>

<style scoped>
.part3{
  height: 700px;
  background-color:rgba(151, 171, 215, 0.12) ;

}

.s6{
  font-size: 40px;
  font-weight: normal;
  margin-left: 180px;
  position: relative;
  top:100px;
}
.flex-container {
  height: 250px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 140px;
}

.flex-item {
  width: 30%;
  height: 400px;
  margin: 15px;
  float: left;
}
.part301{
  width: 330px;
  height: 330px;
}
.s7{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  top:10px;
}
.link{
  color: #0062cc;
  position: relative;
  top:10px;
  font-size: 15px;
}
a{
  text-decoration: none;
}
.s14{
  width: 500px;
  font-size: 15px;
  color:#515a6e;
  margin-top: 20px;
  line-height: 25px;
}
.part3-text{
  font-weight: normal;
}
.part403{
  width: 650px;
  height: 450px;
  margin-left: 550px;
  margin-top: -220px;
  border-radius: 5px;
}
.part4{
  height: 500px;
  margin-left: 160px;
  margin-right: 160px;
  margin-top: 10px;
  position: relative;
  top:80px;
}

</style>